* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  border-collapse: collapse;
}

#celebrateContainer {
  position: fixed;
  top: 0px;
  left: 50%;
  margin-left: -560px;
  width: 1120px;
  height: 500px;
}

.congratulations {
  position: fixed;
  top: -100px;
  left: 50%;
  height: 200px;
  width: 1000px;
  margin: 20px auto 0;
  transform: translate(-50%);
  z-index: 9999;
  animation-name: fadeInleft;
  animation-duration: 5s;
  animation-iteration-count: 1;
}
.congratulations svg {
  display: block;
  overflow: visible;
}
svg text {
  text-shadow: 0 0 0.2em #87f, 0 0 0.2em #87f, 0 0 0.2em #87f;
}

.congratulations path {
  fill: none;
}

@media only screen and (max-width: 768px) {
  #rightBpBar {
    right: 120px;
    transform: scale(0.6);
    transform-origin: 100% 0 0;
  }
  #leftBpBar {
    left: 120px;
    -moz-transform: scale(-0.6, 0.6);
    -webkit-transform: scale(-0.6, 0.6);
    -o-transform: scale(-0.6, 0.6);
    transform: scale(-0.6, 0.6);
    /*IE*/
    filter: FlipH;
    transform-origin: 100% 0 0;
  }
  .congratulations {
    width: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  #rightBpBar {
    right: 220px;
    transform: scale(0.8);
    transform-origin: 100% 0 0;
  }
  #leftBpBar {
    left: 220px;
    -moz-transform: scale(-0.8, 0.8);
    -webkit-transform: scale(-0.8, 0.8);
    -o-transform: scale(-0.8, 0.8);
    transform: scale(-0.8, 0.8);
    /*IE*/
    filter: FlipH;
    transform-origin: 100% 0 0;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1680px) {
  .congratulations {
    font-size: 2.8em;
    letter-spacing: 0.1em;
  }

  #rightBpBar {
    right: 270px;
    transform: scale(0.8);
    transform-origin: 100% 0 0;
  }
  #leftBpBar {
    left: 270px;
    -moz-transform: scale(-0.8, 0.8);
    -webkit-transform: scale(-0.8, 0.8);
    -o-transform: scale(-0.8, 0.8);
    transform: scale(-0.8, 0.8);
    /*IE*/
    filter: FlipH;
    transform-origin: 100% 0 0;
  }
}

@media only screen and (min-width: 1680px) {
  .congratulations {
    font-size: 4em;
    letter-spacing: 0.1em;
  }

  #rightBpBar {
    right: 270px;
  }
  #leftBpBar {
    left: 270px;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    /*IE*/
    filter: FlipH;
  }
}

#rightBpBar {
  position: fixed;
  top: 15px;
  width: 20px;
  height: 700px;
  z-index: 5000;
}
#leftBpBar {
  position: fixed;
  top: 15px;
  width: 20px;
  height: 700px;
  z-index: 5000;
}
.scale0_7 {
  position: absolute;
  right: -230px;
  bottom: -190px;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.bp-line {
  pointer-events: none;
  z-index: 1;
  position: relative;
  height: 100%;
  width: 6px;
  background: url(../images/line.png) repeat-y center;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transition: height 5s linear 0.5s;
  -moz-transition: height 5s linear 0.5s;
  transition: height 5s linear 0.5s;
}

.bp-line.line-shake {
  -webkit-animation: lineShake 2s ease-in-out infinite alternate;
  animation: lineShake 2s ease-in-out infinite alternate;
}

.bp-line.hide::after {
  display: none;
}

.bp-line::after {
  position: absolute;
  bottom: -17px;
  margin-left: -12px;
  width: 30px;
  height: 34px;
  content: '';
  background: url(../images/huo1.png) no-repeat;
  -webkit-animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
  animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
}

.bp {
  position: relative;
  width: 30px;
  height: 60px;
  font-family: 'microsoft yahei';
  background: #8f0006;
  /* Old browsers */
  background: -webkit-linear-gradient(
    left,
    #8f0006 0%,
    #f37c5e 60%,
    #bf0f1a 100%
  );
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(left, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* IE10+ */
  background: linear-gradient(to right, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* W3C */
}

.bp-left,
.bp-left .bp {
  -webkit-transform-origin: 100% -10%;
  -moz-transform-origin: 100% -10%;
  transform-origin: 100% -10%;
}

.bp-right,
.bp-right .bp {
  -webkit-transform-origin: 0 -10%;
  -moz-transform-origin: 0 -10%;
  transform-origin: 0 -10%;
}

.bp-left,
.bp-right {
  position: absolute;
  -webkit-animation: 2s ease-in-out infinite alternate;
  animation: 2s ease-in-out infinite alternate;
}

.bg-ani-name1 {
  -webkit-animation-name: shake1;
  animation-name: shake1;
}

.bg-ani-name2 {
  -webkit-animation-name: shake2;
  animation-name: shake2;
}

.bg-delay0 {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.bg-delay1 {
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
}

.bg-delay2 {
  -webkit-animation-duration: 1.7s;
  animation-duration: 1.7s;
}

.bg-delay3 {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.bg-delay4 {
  -webkit-animation-duration: 1.9s;
  animation-duration: 1.9s;
}

.bg-delay5 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.bp-item {
  opacity: 1;
}

.bp-wrap {
  position: relative;
}

.bang {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -90px;
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 15%,
    rgba(231, 179, 80, 1) 45%,
    rgba(231, 179, 80, 1) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  /* FF3.6+ */
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 15%,
    rgba(231, 179, 80, 1) 45%,
    rgba(231, 179, 80, 1) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  /* Chrome10+,Safari5.1+ */
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 15%,
    rgba(231, 179, 80, 1) 45%,
    rgba(231, 179, 80, 1) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  /* IE10+ */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 15%,
    rgba(231, 179, 80, 1) 45%,
    rgba(231, 179, 80, 1) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  /* W3C */
}

.bp-left .bang {
  left: 25%;
}

.bp-right .bang {
  left: 75%;
}

.bp-left .top {
  top: -12px;
}

.bp-left .bottom {
  bottom: -10.5px;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
}

.bp-left .side {
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.bp-left .side i {
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.bp-left .side i {
  top: -35%;
}

.bp-left .down1 i {
  top: -30%;
}

.bp-left .down2 i {
  top: -15%;
}

.bp-left .text {
  top: 62%;
  z-index: 1;
}

.bp-left .up {
  top: 5px;
  z-index: 1;
}

.bp-left .down1 {
  bottom: -3px;
  z-index: 1;
}

.bp-left .down2 {
  bottom: 5px;
  z-index: 1;
}

.bp-right .top {
  bottom: -10.5px;
}

.bp-right .bottom {
  top: -10.5px;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.bp-right .side {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.bp-right .side i {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.bp-right .side i {
  top: 35%;
}

.bp-right .down1 i {
  top: 30%;
}

.bp-right .down2 i {
  top: 15%;
}

.bp-right .text {
  bottom: 55%;
  z-index: 1;
}

.bp-right .up {
  top: -4px;
  z-index: 1;
}

.bp-right .down1 {
  bottom: 6px;
  z-index: 1;
}

.bp-right .down2 {
  bottom: 11px;
}

.bp .top {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 50%;
  z-index: 2;
  background: #cd1922;
  /* Old browsers */
  background: -webkit-linear-gradient(left, #cd1922 0%, #b40709 100%);
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(left, #cd1922 0%, #b40709 100%);
  /* IE10+ */
  background: linear-gradient(to right, #cd1922 0%, #b40709 100%);
  /* W3C */
}

.bp .top i {
  display: block;
  height: 15px;
  border-radius: 50%;
  background: #8d060a;
  /* Old browsers */
  background: -webkit-linear-gradient(left, #8d060a 0%, #e92322 100%);
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(left, #8d060a 0%, #e92322 100%);
  /* IE10+ */
  background: linear-gradient(to right, #8d060a 0%, #e92322 100%);
  /* W3C */
}

.bp .side {
  position: absolute;
  width: 100%;
  height: 15px;
  overflow: hidden;
  background: #989007;
  /* Old browsers */
  background: -webkit-linear-gradient(
    left,
    #989007 0%,
    #feff7d 60%,
    #d0c801 100%
  );
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(left, #989007 0%, #feff7d 60%, #d0c801 100%);
  /* IE10+ */
  background: linear-gradient(to right, #989007 0%, #feff7d 60%, #d0c801 100%);
  /* W3C */
}

.bp .side i {
  position: relative;
  display: block;
  height: 100%;
  background: #8f0006;
  /* Old browsers */
  background: -webkit-linear-gradient(
    left,
    #8f0006 0%,
    #f37c5e 60%,
    #bf0f1a 100%
  );
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(left, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* IE10+ */
  background: linear-gradient(to right, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* W3C */
}

.bp .bottom {
  position: absolute;
  width: 100%;
  height: 10.5px;
  background: #8f0006;
  /* Old browsers */
  background: -webkit-linear-gradient(
    left,
    #8f0006 0%,
    #f37c5e 60%,
    #bf0f1a 100%
  );
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(left, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* IE10+ */
  background: linear-gradient(to right, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);
  /* W3C */
}

.bp .text {
  position: absolute;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-top: -9px;
  margin-left: -9px;
  text-align: center;
  font-size: 12px;
  padding: 2px;
  font-weight: bold;
}

.bp .text .out {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px #e42021 solid;
  background-color: #fbee01;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bp .text .mid {
  display: block;
  height: 13px;
  padding: 2px;
}

.bp .text .in {
  display: block;
  height: 13px;
  background-color: #f62022;
}

.bp .text span {
  position: relative;
  display: block;
  line-height: 1;
  z-index: 1;
  color: #000;
}

.hold-forwards {
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

.bp-fly {
  -webkit-animation: flying 0.4s ease-out 0.4s;
  animation: flying 0.4s ease-out 0.4s;
}

.on.bp-item {
  z-index: 1;
}

.on .bp {
  -webkit-animation: easeOut 0.2s ease-in;
  animation: easeOut 0.2s ease-in;
}

.on .bang1 {
  -webkit-animation: bang1 0.4s ease-out;
  animation: bang1 0.4s ease-out;
}

.on .bang2 {
  -webkit-animation: bang2 0.4s ease-out;
  animation: bang2 0.4s ease-out;
}

.on .bang3 {
  -webkit-animation: bang3 0.4s ease-out;
  animation: bang3 0.4s ease-out;
}

.on .bang4 {
  -webkit-animation: bang4 0.4s ease-out;
  animation: bang4 0.4s ease-out;
}

.dear-joy {
  position: absolute;
  right: 40px;
  bottom: 25px;
  z-index: 5002;
}

.dear-joy2 {
  position: absolute;
  right: 20px;
  bottom: 30px;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}

.dear-joy2.fadeIn {
  -webkit-animation: fadeIn 1s linear 1s;
  animation: fadeIn 1s linear 1s;
}

.dear-joy .joy-wrap {
  position: relative;
}

.dear-joy .body {
  position: relative;
  width: 200px;
  height: 300px;
  background: url(../images/rabbit.gif) no-repeat;
  z-index: 1;
}

.dear-joy .left-ear {
  position: absolute;
  left: -34px;
  top: 33px;
  width: 44px;
  height: 38px;
  background: none /*url(../images/erduo2.png) no-repeat*/;
  -webkit-transform-origin: right;
  transform-origin: right;
}

.dear-joy .right-ear {
  position: absolute;
  left: 124px;
  top: 23px;
  width: 54px;
  height: 41px;
  background: none /*url(../images/erduo1.png) no-repeat*/;
  -webkit-transform-origin: left;
  transform-origin: left;
}

.dear-joy .left-hand {
  position: absolute;
  left: -32px;
  top: 130px;
  width: 88px;
  height: 38px;
  background: none /*url(../images/shou2.png) no-repeat*/;
  -webkit-transform-origin: right;
  transform-origin: right;
}

.dear-joy .right-hand {
  position: absolute;
  left: 87px;
  top: 119px;
  width: 75px;
  height: 51px;
  background: none /*url(../images/shou1.png) no-repeat*/;
  -webkit-transform-origin: left;
  transform-origin: left;
}

.dear-joy .sticks {
  position: absolute;
  left: -52px;
  top: 6px;
  width: 60px;
  height: 4px;
  background-color: #4c290d;
  border-radius: 4px;
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.dear-joy .sticks::after {
  position: absolute;
  bottom: -12px;
  margin-left: -12px;
  width: 30px;
  height: 34px;
  content: '';
  background: url(../images/dianran.png) no-repeat;
  -webkit-animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
  animation: shining 1.2s cubic-bezier(0.14, 0.43, 0.87, 0.56) infinite;
}

.dear-joy .shadow,
.dear-joy2 .shadow {
  position: absolute;
  left: 18px;
  bottom: -11px;
  width: 100px;
  height: 32px;
  background-color: #000;
  border-radius: 50%;
  opacity: 0.5;
}

.dear-joy2 .shadow {
  left: 38px;
}

.dear-joy .click-title {
  position: absolute;
  top: -75px;
  left: 5px;
  width: 95px;
  height: 71px;
  background: url(../images/dianpao.png) no-repeat;
}

.dear-joy.jump .joy-wrap {
  -webkit-animation: jumpUp 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: jumpUp 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .shadow {
  -webkit-animation: shadow 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: shadow 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .left-ear {
  -webkit-animation: leftRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: leftRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .right-ear {
  -webkit-animation: rightRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: rightRotate 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .left-hand {
  -webkit-animation: leftRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: leftRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.jump .right-hand {
  -webkit-animation: rightRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite
    alternate;
  animation: rightRotate2 0.5s cubic-bezier(0, 0.26, 0.4, 1) infinite alternate;
}

.dear-joy.dian {
  -webkit-animation: dian 1s ease-in;
  animation: dian 1s ease-in;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

.dear-joy.dian .shadow {
  -webkit-animation: shadowMove 0.5s ease-in;
  animation: shadowMove 0.5s ease-in;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translate3d(0px, -640px, 0px);
  }

  50% {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }

  75% {
    -webkit-transform: translate3d(0px, -30px, 0px);
  }

  100% {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
}

@keyframes slideDown {
  0% {
    transform: translate3d(0px, -640px, 0px);
  }

  50% {
    transform: translate3d(0px, 0px, 0px);
  }

  75% {
    transform: translate3d(0px, -30px, 0px);
  }

  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}

@-webkit-keyframes easeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes easeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes shining {
  0% {
    -webkit-transform: scale(0.7);
  }

  50% {
    -webkit-transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(0.7);
  }
}

@keyframes shining {
  0% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.7);
  }
}

@-webkit-keyframes lineShake /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(-3deg);
  }

  to {
    -webkit-transform: rotate(3deg);
  }
}

@keyframes lineShake /* Safari and Chrome */ {
  from {
    transform: rotate(-3deg);
  }

  to {
    transform: rotate(3deg);
  }
}

@-webkit-keyframes shake1 /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(-5deg);
  }

  to {
    -webkit-transform: rotate(5deg);
  }
}

@keyframes shake1 /* Safari and Chrome */ {
  from {
    transform: rotate(-5deg);
  }

  to {
    transform: rotate(5deg);
  }
}

@-webkit-keyframes shake2 /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(-5deg);
  }
}

@keyframes shake2 /* Safari and Chrome */ {
  from {
    transform: rotate(5deg);
  }

  to {
    transform: rotate(-5deg);
  }
}

@-webkit-keyframes bang1 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.4);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.8);
    opacity: 1;
  }
}

@keyframes bang1 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0.4);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}

@-webkit-keyframes bang5 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.5);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@keyframes bang5 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes bang2 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.6);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes bang2 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@-webkit-keyframes bang3 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.7);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1.4);
    opacity: 1;
  }
}

@keyframes bang3 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0.7);
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 1;
  }
}

@-webkit-keyframes bang4 {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.3);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.6);
    opacity: 1;
  }
}

@keyframes bang4 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}

@-webkit-keyframes flying {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes shadowMove {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
  }

  to {
    -webkit-transform: translate3d(0px, 60px, 0px) scale(0.5);
  }
}

@-webkit-keyframes dian {
  0% {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }

  20% {
    -webkit-transform: translate3d(-103px, -76px, 0px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(-103px, -76px, 0px);
    opacity: 0;
  }
}

@-webkit-keyframes jumpUp {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }

  to {
    -webkit-transform: translate3d(0px, -40px, 0px);
  }
}

@-webkit-keyframes leftRotate {
  from {
    -webkit-transform: rotate(-20deg);
  }

  to {
    -webkit-transform: rotate(20deg);
  }
}

@-webkit-keyframes rightRotate {
  from {
    -webkit-transform: rotate(20deg);
  }

  to {
    -webkit-transform: rotate(-20deg);
  }
}

@-webkit-keyframes leftRotate2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(20deg);
  }
}

@-webkit-keyframes rightRotate2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-20deg);
  }
}

@-webkit-keyframes shadow {
  from {
    -webkit-transform: scale(1);
  }

  to {
    -webkit-transform: scale(0.8);
  }
}

@keyframes flying {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shadowMove {
  from {
    transform: translate3d(0px, 0px, 0px) scale(1);
  }

  to {
    transform: translate3d(0px, 60px, 0px) scale(0.5);
  }
}

@keyframes dian {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }

  20% {
    transform: translate3d(-103px, -76px, 0px);
    opacity: 1;
  }

  100% {
    transform: translate3d(-103px, -76px, 0px);
    opacity: 0;
  }
}

@keyframes jumpUp {
  from {
    transform: translate3d(0px, 0px, 0px);
  }

  to {
    transform: translate3d(0px, -40px, 0px);
  }
}

@keyframes leftRotate {
  from {
    transform: rotate(-20deg);
  }

  to {
    transform: rotate(20deg);
  }
}

@keyframes rightRotate {
  from {
    transform: rotate(20deg);
  }

  to {
    transform: rotate(-20deg);
  }
}

@keyframes leftRotate2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(20deg);
  }
}

@keyframes rightRotate2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-20deg);
  }
}

@keyframes shadow {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.8);
  }
}

@keyframes fadeInleft {
  100% {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
  99% {
    opacity: 0.99;
    transform: translate(-50%, -2%);
  }
  98% {
    opacity: 0.98;
    transform: translate(-50%, -4%);
  }
  97% {
    opacity: 0.97;
    transform: translate(-50%, -6%);
  }
  96% {
    opacity: 0.96;
    transform: translate(-50%, -8%);
  }
  95% {
    opacity: 0.95;
    transform: translate(-50%, -10%);
  }
  94% {
    opacity: 0.94;
    transform: translate(-50%, -12%);
  }
  93% {
    opacity: 0.93;
    transform: translate(-50%, -14%);
  }
  92% {
    opacity: 0.92;
    transform: translate(-50%, -16%);
  }
  91% {
    opacity: 0.91;
    transform: translate(-50%, -18%);
  }
  90% {
    opacity: 0.9;
    transform: translate(-50%, -20%);
  }
  89% {
    opacity: 0.89;
    transform: translate(-50%, -22%);
  }
  88% {
    opacity: 0.88;
    transform: translate(-50%, -24%);
  }
  87% {
    opacity: 0.87;
    transform: translate(-50%, -26%);
  }
  86% {
    opacity: 0.86;
    transform: translate(-50%, -28%);
  }
  85% {
    opacity: 0.85;
    transform: translate(-50%, -30%);
  }
  84% {
    opacity: 0.84;
    transform: translate(-50%, -32%);
  }
  83% {
    opacity: 0.83;
    transform: translate(-50%, -34%);
  }
  82% {
    opacity: 0.82;
    transform: translate(-50%, -36%);
  }
  81% {
    opacity: 0.81;
    transform: translate(-50%, -38%);
  }
  80% {
    opacity: 0.8;
    transform: translate(-50%, -40%);
  }
  79% {
    opacity: 0.79;
    transform: translate(-50%, -42%);
  }
  78% {
    opacity: 0.78;
    transform: translate(-50%, -44%);
  }
  77% {
    opacity: 0.77;
    transform: translate(-50%, -46%);
  }
  76% {
    opacity: 0.76;
    transform: translate(-50%, -48%);
  }
  75% {
    opacity: 0.75;
    transform: translate(-50%, -50%);
  }
  74% {
    opacity: 0.74;
    transform: translate(-50%, -52%);
  }
  73% {
    opacity: 0.73;
    transform: translate(-50%, -54%);
  }
  72% {
    opacity: 0.72;
    transform: translate(-50%, -56%);
  }
  71% {
    opacity: 0.71;
    transform: translate(-50%, -58%);
  }
  70% {
    opacity: 0.7;
    transform: translate(-50%, -60%);
  }
  69% {
    opacity: 0.69;
    transform: translate(-50%, -62%);
  }
  68% {
    opacity: 0.68;
    transform: translate(-50%, -64%);
  }
  67% {
    opacity: 0.67;
    transform: translate(-50%, -66%);
  }
  66% {
    opacity: 0.66;
    transform: translate(-50%, -68%);
  }
  65% {
    opacity: 0.65;
    transform: translate(-50%, -70%);
  }
  64% {
    opacity: 0.64;
    transform: translate(-50%, -72%);
  }
  63% {
    opacity: 0.63;
    transform: translate(-50%, -74%);
  }
  62% {
    opacity: 0.62;
    transform: translate(-50%, -76%);
  }
  61% {
    opacity: 0.61;
    transform: translate(-50%, -78%);
  }
  60% {
    opacity: 0.6;
    transform: translate(-50%, -80%);
  }
  59% {
    opacity: 0.59;
    transform: translate(-50%, -82%);
  }
  58% {
    opacity: 0.58;
    transform: translate(-50%, -84%);
  }
  57% {
    opacity: 0.57;
    transform: translate(-50%, -86%);
  }
  56% {
    opacity: 0.56;
    transform: translate(-50%, -88%);
  }
  55% {
    opacity: 0.55;
    transform: translate(-50%, -90%);
  }
  54% {
    opacity: 0.54;
    transform: translate(-50%, -92%);
  }
  53% {
    opacity: 0.53;
    transform: translate(-50%, -94%);
  }
  52% {
    opacity: 0.52;
    transform: translate(-50%, -96%);
  }
  51% {
    opacity: 0.51;
    transform: translate(-50%, -98%);
  }
  50% {
    opacity: 0.5;
    transform: translate(-50%, -100%);
  }
  49% {
    opacity: 0.49;
    transform: translate(-50%, -102%);
  }
  48% {
    opacity: 0.48;
    transform: translate(-50%, -104%);
  }
  47% {
    opacity: 0.47;
    transform: translate(-50%, -106%);
  }
  46% {
    opacity: 0.46;
    transform: translate(-50%, -108%);
  }
  45% {
    opacity: 0.45;
    transform: translate(-50%, -110%);
  }
  44% {
    opacity: 0.44;
    transform: translate(-50%, -112%);
  }
  43% {
    opacity: 0.43;
    transform: translate(-50%, -114%);
  }
  42% {
    opacity: 0.42;
    transform: translate(-50%, -116%);
  }
  41% {
    opacity: 0.41;
    transform: translate(-50%, -118%);
  }
  40% {
    opacity: 0.4;
    transform: translate(-50%, -120%);
  }
  39% {
    opacity: 0.39;
    transform: translate(-50%, -122%);
  }
  38% {
    opacity: 0.38;
    transform: translate(-50%, -124%);
  }
  37% {
    opacity: 0.37;
    transform: translate(-50%, -126%);
  }
  36% {
    opacity: 0.36;
    transform: translate(-50%, -128%);
  }
  35% {
    opacity: 0.35;
    transform: translate(-50%, -130%);
  }
  34% {
    opacity: 0.34;
    transform: translate(-50%, -132%);
  }
  33% {
    opacity: 0.33;
    transform: translate(-50%, -134%);
  }
  32% {
    opacity: 0.32;
    transform: translate(-50%, -136%);
  }
  31% {
    opacity: 0.31;
    transform: translate(-50%, -138%);
  }
  30% {
    opacity: 0.3;
    transform: translate(-50%, -140%);
  }
  29% {
    opacity: 0.29;
    transform: translate(-50%, -142%);
  }
  28% {
    opacity: 0.28;
    transform: translate(-50%, -144%);
  }
  27% {
    opacity: 0.27;
    transform: translate(-50%, -146%);
  }
  26% {
    opacity: 0.26;
    transform: translate(-50%, -148%);
  }
  25% {
    opacity: 0.25;
    transform: translate(-50%, -150%);
  }
  24% {
    opacity: 0.24;
    transform: translate(-50%, -152%);
  }
  23% {
    opacity: 0.23;
    transform: translate(-50%, -154%);
  }
  22% {
    opacity: 0.22;
    transform: translate(-50%, -156%);
  }
  21% {
    opacity: 0.21;
    transform: translate(-50%, -158%);
  }
  20% {
    opacity: 0.2;
    transform: translate(-50%, -160%);
  }
  19% {
    opacity: 0.19;
    transform: translate(-50%, -162%);
  }
  18% {
    opacity: 0.18;
    transform: translate(-50%, -164%);
  }
  17% {
    opacity: 0.17;
    transform: translate(-50%, -166%);
  }
  16% {
    opacity: 0.16;
    transform: translate(-50%, -168%);
  }
  15% {
    opacity: 0.15;
    transform: translate(-50%, -170%);
  }
  14% {
    opacity: 0.14;
    transform: translate(-50%, -172%);
  }
  13% {
    opacity: 0.13;
    transform: translate(-50%, -174%);
  }
  12% {
    opacity: 0.12;
    transform: translate(-50%, -176%);
  }
  11% {
    opacity: 0.11;
    transform: translate(-50%, -178%);
  }
  10% {
    opacity: 0.1;
    transform: translate(-50%, -180%);
  }
  9% {
    opacity: 0.09;
    transform: translate(-50%, -182%);
  }
  8% {
    opacity: 0.08;
    transform: translate(-50%, -184%);
  }
  7% {
    opacity: 0.07;
    transform: translate(-50%, -186%);
  }
  6% {
    opacity: 0.06;
    transform: translate(-50%, -188%);
  }
  5% {
    opacity: 0.05;
    transform: translate(-50%, -190%);
  }
  4% {
    opacity: 0.04;
    transform: translate(-50%, -192%);
  }
  3% {
    opacity: 0.03;
    transform: translate(-50%, -194%);
  }
  2% {
    opacity: 0.02;
    transform: translate(-50%, -196%);
  }
  1% {
    opacity: 0.01;
    transform: translate(-50%, -198%);
  }
  0% {
    opacity: 0;
    transform: translate(-50%, -200%);
  }
}
